Anychart is an easy to use library that lets us add chart into our JavaScript web app.
In this article, we’ll look at how to create basic charts with Anychart.
Line Chart
We can add a line chart with Anychart.
To add one, we write the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["January", 100],
["February", 120],
["March", 180]
];
const chart = anychart.line();
const series = chart.line(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the first script tag to add the Anychart library.
Below that, we add the div for the chart container.
And below that, we add the script tag for the line chart.
data has an array with the x and y-axis values in the array entry.
anychart.line creates the line chart.
chart.line adds the data for the line chart.
chart.container is called with the ID of the chart container element inside to render the chart in the container.
And chart.draw draws the chart.
Marimekko Charts
We can create Marimekko charts with Anychart.
To do so, we write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = anychart.data.set([
["QTR1", 10000, 12500],
["QTR2", 12000, 15000],
["QTR3", 13000, 16500],
["QTR4", 10000, 13000]
]);
const series1 = data.mapAs({ x: 0, value: 1 });
const series2 = data.mapAs({ x: 0, value: 2 });
chart = anychart.mekko();
chart.mekko(series1);
chart.mekko(series2);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the mekko package with the 2nd script tag.
Then we call anychart.darta.set with the data for our chart.
Then we call data.mapAs with an object to map the x-axis to the index of the value in the array.
x is set to 0, so it takes the value from the data array above it.
value is set to 1 and 2 respectively so the value from 1 and 2 is taken as the data.
Then we call anychart.mekko to create the chart.
And we call chart.mekko with the series1 and series2 data to set the chart data.
The rest of the code is the same as the previous example.
Bar Mekko Chart
We can create a bar mekko chart with the barmekko method.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
{ x: "Spring", value: 20 },
{ x: "Summer", value: 30 },
{ x: "Autumn", value: 80 },
{ x: "Winter", value: 40 }
];
const chart = anychart.barmekko();
const series = chart.mekko(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We have the data array with objects with the x and y-axis data respectively.
Then we call anychart.barmekko to create the bar mekko chart.
Next, we call chart.mekko to set the data.
And the rest of the code is the same as the previous examples.
Conclusion
We can create line charts, Marimekko, and bar mekko charts easily with Anychart.
